<template>
  <div class="main-menu">
    <VXETable
      ref="mainTable"
      :tableOption="tableOptions"
      @radioChangeEvent="radioChangeEvent"
    >
      <template v-slot:tableButton>
        <el-button type="primary" @click="addMenuList"
          ><el-icon><Plus /></el-icon>&nbsp;{{ $t(lang.add) }}</el-button
        >
        <el-button type="primary" @click="editMenuList"
          ><el-icon><EditPen /></el-icon>&nbsp;
          {{ $t(lang.edit) }}</el-button
        >
        <el-button type="primary" @click="deleteMenuList"
          ><el-icon><Delete /></el-icon>&nbsp;
          {{ $t(lang.delete) }}</el-button
        >
      </template>
    </VXETable>
    <el-dialog
      v-model="dialogData.dialogVisible"
      :title="dialogData.title"
      fullscreen
      draggable
    >
      <vxForm
        ref="formRef"
        :formData="formData"
        :formItems="formDolumn"
        @changeForm="changeForm"
      ></vxForm>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">{{ $t(lang.cancel) }}</el-button>
          <el-button type="primary" @click="submitDialog">{{ $t(lang.define) }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import VXETable from "@/components/vxe-table/index.vue";
import vxForm from "@/components/vx-form/index.vue";
import formItems from "./data/add";
import tableOption from "./data/data";
import { getDetail,deleteList, } from "@/api/blog";
import { getAllSelectList,getSelectList } from "@/api/articleMenu";
import { ElMessage } from "element-plus";
import { inject } from 'vue';
import { getBrowserType,getUserOsInfo,getDataTime } from "@/utils/UserDevices"
import { getStorage } from "@/utils/storage"
const mainTable = ref();
const lang:any = reactive(inject('langs'))
let tableOptions = ref(tableOption)
const formRef = ref();
let dialogData = reactive({
  dialogVisible: false,
  title: "新增",
  width: "50%",
});
let formData = ref({});
let formDolumn = ref(formItems);
let redioSelect = reactive({ id: "" });
let fomatData = ref()
const getAll = async () => {
  const res = await getAllSelectList({})
  fomatData.value = res.data
  tableOptions.value.column = tableOptions.value.column.map((item:any) => {
    if(item?.field == 'firstClass' || item?.field == 'secondClass'){
      item.formatter = ({ cellValue }) => {
        if(cellValue){
          const val = fomatData.value.find((i:any) => i.id == cellValue )
          return val? val.title : cellValue
        }
      }
    }
    return item
  })
  formDolumn.value.items = formDolumn.value.items.map((i:any) => {
    if(i.prop == 'tagType'){
      i.option = fomatData.value.map((f:any) => {
        return {
          label:f.title,
          value:f.icon
        }
      })
    }
    if(i.prop == 'firstClass'){
      i.option = fomatData.value.filter((o:any) => {
        return !o.pId
      }).map((y:any) => {
        return {
          label:y.title,
          value:String(y.id)
        }
      })
    }
    return i
  })
}
onMounted(() => {
  mainTable.value.getTableList("/blog/all", "post");
  getAll()
});
const addMenuList = () => {
  formData.value.createTime = getDataTime()
  formData.value.ip = getStorage('ip')
  formData.value.address = getStorage('city')
  formData.value.system = getUserOsInfo()
  formData.value.browser = getBrowserType()
  dialogData.dialogVisible = true;
  dialogData.title = "新增";
};
const editMenuList = () => {
  if (redioSelect.id == "") {
    ElMessage({
      showClose: true,
      message: "请选择一条数据",
      type: "warning",
    });
    return;
  }
  dialogData.title = "修改";
  getDetails();
};
const submitDialog = () => {
  let url =
    dialogData.title == "新增" ? "/blog/insert" : "/blog/edit";
  formRef.value
    .submitForm({
      url: url,
      method: "post",
      data: formData.value,
    })
    .then((res: any) => {
      if (res.code == 200) {
        formRef.value.resetForm();
        formData.value = {};
        dialogData.dialogVisible = false;
        mainTable.value.getTableList("/blog/all", "post");
      }
    });
};
const cancel = () => {
  formRef.value.resetForm();
  dialogData.dialogVisible = false;
  formData.value = {};
};
const deleteMenuList = () => {
  if (redioSelect.id == "") {
    ElMessage({
      showClose: true,
      message: "请选择一条数据",
      type: "warning",
    });
    return;
  }
  let obj = { id: redioSelect.id };
  deleteList(obj).then((res: any) => {
    if (res.code == 200) {
      ElMessage({
        showClose: true,
        message: res.message,
        type: "success",
      });
      mainTable.value.getTableList("/blog/all", "post");
    }
  });
};
const getDetails = () => {
  let obj = { id: redioSelect.id };
  getDetail(obj).then((res: any) => {
    formData.value = res.data;
    dialogData.dialogVisible = true;
  });
};
const changeForm = (prop:any, val:any, option:any) => {
  if(prop == 'firstClass'){
    getSelectList({ id:val }).then((res:any) => {
      formDolumn.value.items = formDolumn.value.items.map(i => {
        if(i.prop == 'secondClass'){
          i.option = res.data.map((o:any) => {
            return {
              label:o.title,
              value:o.id
            }
          })
        }
        return i
      })
    })
  }
  console.log(prop, val, option)
}
const radioChangeEvent = (data: any) => {
  redioSelect = data;
};
</script>

<style scoped lang="scss">
.main-menu {
  background-color: #fff;
  border-radius: 4px;
  padding: 20px;
  min-height: 500px;
}
</style>
